<!--填报课程考核实施计划-->
<template>
  <div class="paperprint-container">
    <div class="search-container">
      <div class="search-container-left">
        <div class="search-container-item">
          <span>学期：</span>
          <el-select
            v-model="xq"
            style="width: 91px"
            size="mini"
            placeholder="请选择"
          >
            <el-option
              v-for="item in xqList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="search-container-item">
          <span>培养层次：</span>
          <el-select
            v-model="pycc"
            style="width: 80px"
            size="mini"
            placeholder="请选择"
          >
            <el-option
              v-for="item in pyccList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="search-container-item">
          <span>修习类型：</span>
          <el-select
            v-model="xxlx"
            style="width: 80px"
            size="mini"
            placeholder="请选择"
          >
            <el-option
              v-for="item in xxlxList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="search-container-item">
          <span>课程名称：</span>
          <el-input
            style="width: 152px"
            size="mini"
            placeholder="请输入内容"
            v-model="course"
          ></el-input>
        </div>
        <div class="search-container-item">
          <span>课程负责人：</span>
          <el-select
            v-model="kcfzr"
            style="width: 102px"
            size="mini"
            placeholder="请选择"
          >
            <el-option
              v-for="item in kcfzrList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="search-button">
          <img src="../../../assets/assessment/icon-search.png" alt=""/>
          <span>查询</span>
        </div>
      </div>
      <div class="search-container-right">
        <div class="export-button">
          <img src="../../../assets/assessment/icon-print.png" alt=""/>
          <span>打印</span>
        </div>
        <div class="add-button">
          <img src="../../../assets/assessment/icon-export.png" alt=""/>
          <span>导出</span>
        </div>
      </div>
    </div>

    <div class="table-container">
      <div class="table-header">
        <div class="item" style="width: 67px">
          <el-checkbox
            v-model="rowColumnChecked"
            @change="selectCheck('all')"
          ></el-checkbox>
        </div>
        <div class="item" style="width: 97px">课程编号</div>
        <div class="item" style="width: 106px">课程名称</div>
        <div class="item" style="width: 114px">课程负责人</div>
        <div class="item" style="width: 123px">
          <el-checkbox
            v-model="sjcfmColumnChecked"
            @change="selectCheck('sjcfm')"
          ></el-checkbox
          >
          <span>试卷册封面</span>
        </div>
        <div class="item" style="width: 116px">
          <el-checkbox
            v-model="kckhColumnChecked"
            @change="selectCheck('kckhssjh')"
          ></el-checkbox>
          <div>
            <div>课程考核</div>
            <div>实施计划</div>
          </div>
        </div>
        <div class="item" style="width: 119px">
          <el-checkbox
            v-model="mtjhColumnChecked"
            @change="selectCheck('mtjh')"
          ></el-checkbox
          >
          <span>命题计划</span>
        </div>
        <div class="item" style="width: 136px">
          <el-checkbox
            v-model="kcdjbColumnChecked"
            @change="selectCheck('kcdjb')"
          ></el-checkbox
          >
          <span>考场登记表</span>
        </div>
        <div class="item" style="width: 111px">
          <el-checkbox
            v-model="sycpColumnChecked"
            @change="selectCheck('sycp')"
          ></el-checkbox
          >
          <span>送印传票</span>
        </div>
        <div class="item" style="width: 124px">
          <el-checkbox
            v-model="sjdfpColumnChecked"
            @change="selectCheck('sjdfp')"
          ></el-checkbox
          >
          <span>试卷袋封皮</span>
        </div>
        <div class="item" style="width: 81px">
          <el-checkbox
            v-model="abjColumnChecked"
            @change="selectCheck('abj')"
          ></el-checkbox
          >
          <span>AB卷</span>
        </div>
        <div class="item" style="width: 155px">
          <el-checkbox
            v-model="daColumnChecked"
            @change="selectCheck('da')"
          ></el-checkbox
          >
          <span>答案及评分标准</span>
        </div>
        <div class="item" style="width: 116px">
          <el-checkbox
            v-model="dtjColumnChecked"
            @change="selectCheck('dtj')"
          ></el-checkbox
          >
          <span>答题卷</span>
        </div>
        <div class="item" style="width: 145px">
          <el-checkbox
            v-model="sjfxbColumnChecked"
            @change="selectCheck('sjfxb')"
          ></el-checkbox
          >
          <span>试卷分析表</span>
        </div>
        <div class="item" style="width: 151px">
          <el-checkbox
            v-model="zpcjdColumnChecked"
            @change="selectCheck('zpcjd')"
          ></el-checkbox
          >
          <span>总评成绩单</span>
        </div>
      </div>
      <div class="table-body" v-for="(item, index) in tableData" :key="index">
        <div class="item" style="width: 67px">
          <el-checkbox
            v-model="item.rowChecked"
            @change="itemChange('row')"
          ></el-checkbox>
        </div>
        <div class="item" style="width: 97px">{{ item.kcbh }}</div>
        <div class="item" style="width: 106px">{{ item.kcmc }}</div>
        <div class="item" style="width: 114px">{{ item.kcfzr }}</div>
        <div class="item" style="width: 123px">
          <el-checkbox
            v-model="item.sjcfmChecked"
            @change="itemChange('sjcfm')"
          ></el-checkbox
          >
          <span>预览</span>
        </div>
        <div class="item" style="width: 116px">
          <el-checkbox v-model="item.kckhssjhChecked"></el-checkbox>
          <span>预览</span>
        </div>
        <div class="item" style="width: 119px">
          <el-checkbox v-model="item.mtjhChecked"></el-checkbox
          >
          <span>预览</span>
        </div>
        <div class="item" style="width: 136px">
          <el-checkbox v-model="item.kcdjbChecked"></el-checkbox
          >
          <span>预览</span>
        </div>
        <div class="item" style="width: 111px">
          <el-checkbox v-model="item.sycpChecked"></el-checkbox
          >
          <span>预览</span>
        </div>
        <div class="item" style="width: 124px">
          <el-checkbox v-model="item.sjdfpChecked"></el-checkbox
          >
          <span>预览</span>
        </div>
        <div class="item" style="width: 81px">
          <el-checkbox v-model="item.abjChecked"></el-checkbox>
          <span>预览</span>
        </div>
        <div class="item" style="width: 155px">
          <el-checkbox v-model="item.daChecked"></el-checkbox>
          <span>预览</span>
        </div>
        <div class="item" style="width: 116px">
          <el-checkbox v-model="item.dtjChecked"></el-checkbox>
          <span>预览</span>
        </div>
        <div class="item" style="width: 145px">
          <el-checkbox v-model="item.ksfxbChecked"></el-checkbox
          >
          <span>预览</span>
        </div>
        <div class="item" style="width: 151px">
          <el-checkbox v-model="item.zpcjdChecked"></el-checkbox
          >
          <span>预览</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      course: "",
      xq: "2020春",
      xqList: [
        {
          value: "2020春",
          label: "2020春",
        },
        {
          value: "2020夏",
          label: "2020夏",
        },
      ],
      pycc: "大专",
      pyccList: [
        {
          value: "大专",
          label: "大专",
        },
        {
          value: "本科",
          label: "本科",
        },
      ],
      xxlx: "必修",
      xxlxList: [
        {
          value: "选修",
          label: "选修",
        },
        {
          value: "必修",
          label: "必修",
        },
      ],
      kcfzr: "李丽",
      kcfzrList: [
        {
          value: "李丽",
          label: "李丽",
        },
        {
          value: "万万",
          label: "万万",
        },
      ],
      rowColumnChecked: false,
      sjcfmColumnChecked: false,
      kckhColumnChecked: false,
      mtjhColumnChecked: false,
      kcdjbColumnChecked: false,
      sycpColumnChecked: false,
      sjdfpColumnChecked: false,
      abjColumnChecked: false,
      daColumnChecked: false,
      dtjColumnChecked: false,
      sjfxbColumnChecked: false,
      zpcjdColumnChecked: false,
      tableData: [
        {
          rowChecked: false,
          kcbh: "32657411",
          kcmc: "计算机教研室",
          kcfzr: "李某某",
          sjcfmChecked: false,
          kckhssjhChecked: false,
          mtjhChecked: false,
          kcdjbChecked: false,
          sycpChecked: false,
          sjdfpChecked: false,
          abjChecked: false,
          daChecked: false,
          dtjChecked: false,
          sjfxbChecked: false,
          zpcjdChecked: false,
        },
        {
          rowChecked: false,
          kcbh: "32657412",
          kcmc: "计算机教研室",
          kcfzr: "李某某",
          sjcfmChecked: false,
          kckhssjhChecked: false,
          mtjhChecked: false,
          kcdjbChecked: false,
          sycpChecked: false,
          sjdfpChecked: false,
          abjChecked: false,
          daChecked: false,
          dtjChecked: false,
          sjfxbChecked: false,
          zpcjdChecked: false,
        },
      ],
      filepath: "",
    };
  },
  methods: {
    itemChange(string) {
      this[string + "ColumnChecked"] = this.tableData.every((item) => {
        return item[string + "Checked"];
      });
    },
    selectCheck(choose) {
      if (choose) {
        if (choose === "all") {
          this.tableData = this.tableData.map((item) => {
            return {...item, rowChecked: this.rowColumnChecked};
          });
        } else {
          this.tableData = this.tableData.map((item) => {
            return {
              ...item,
              [choose + "Checked"]: this[choose + "ColumnChecked"],
            };
          });
        }
      }
    },
    changeInputFile() {
      document.getElementById("theFile").click();
      document.getElementById("theFile").onchange = (event) => {
        this.filepath = event.target.value;
      };
    },
  },
};
</script>

<style lang="less" scoped>
.pagination-block {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.paperprint-container {
  .el-checkbox__inner:hover {
    border-color: #004ca7;
  }

  .el-checkbox__inner {
    border: 1px solid #004ca7;
    border-radius: 0;
  }

  .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #004ca7;
    border-color: #004ca7;
  }

  .el-checkbox__input.is-checked + .el-checkbox__label {
    color: #004ca7;
  }

  .el-checkbox.is-bordered.is-checked {
    border-color: #004ca7;
  }

  .el-checkbox__input.is-focus .el-checkbox__inner {
    border-color: #004ca7;
  }

  .export-report-container {
    .el-dialog__body {
      padding: 64px 0 64px 50px;

      .el-radio {
        margin-right: 79px;
      }
    }

    .el-dialog__footer {
      padding-bottom: 103px;
    }
  }

  .import-report-container {
    .el-dialog__body {
      padding-left: 165px;
      padding-top: 71px;
      padding-bottom: 60px;

      > div {
        > span {
          font-size: 18px;
          font-weight: bold;
          line-height: 20px;
          color: #004ca7;
          vertical-align: middle;
        }

        > input {
          width: 254px;
          height: 25px;
          border: 1px solid #004ca7;
          opacity: 1;
          border-radius: 4px;
          padding-left: 5px;
          margin-right: 8px;
          color: #004ca7;
          vertical-align: middle;
        }

        > div {
          display: inline-block;
          font-size: 18px;
          padding: 1px 10px;
          border-radius: 4px;
          vertical-align: middle;
          cursor: pointer;

          &:nth-child(3) {
            color: rgba(2, 200, 108, 1);
            background: #f1fff8;
            border: 1px solid #02c86c;
            position: relative;
            margin-right: 20px;

            > input {
              width: 0px;
              position: absolute;
              left: 0;
              opacity: 1;
              cursor: pointer;
            }
          }

          &:nth-child(4) {
            color: rgba(82, 48, 233, 1);
            background: rgba(235, 230, 255, 1);
            border: 1px solid rgba(82, 48, 233, 1);
          }
        }
      }
    }

    .el-dialog__footer {
      padding-bottom: 76px;

      .green {
        padding: 1px 17px;
      }
    }
  }
}
</style>
<style lang="less" scoped>
@import "../../../styles/paper-print.less";
</style>
